<script setup lang="ts">
import { ref, computed, watch } from "vue";
//引入新建的pinia文件夹下index.js的模块
import { useRouteStore } from "../pinia/index";
let pinias = useRouteStore();

let closable = computed(() => {
  return pinias.routeArr.length > 1;
});

// 删除路径
const handleClose = (name: string) => {
  if (name != "首页") {
    pinias.delRoute(name);
  } else {
    window.$message.warning("首页导航不可删除");
  }
};
// 切换路由
const tabChange = (value: string | number) => {
  pinias.updateUrl(value);
};
</script>

<template>
  <n-tabs
    @before-leave="tabChange"
    v-model:value="pinias.routeUrl"
    type="card"
    :closable="closable"
    tab-style="min-width: 80px;"
    @close="handleClose"
  >
    <n-tab-pane v-for="item in pinias.routeArr" :key="item.url" :name="item.name" />
    <!-- <template #prefix>
            首页
        </template>
        <template #suffix>
            下一个
        </template> -->
  </n-tabs>
</template>

<style lang="scss" scoped></style>
